<template>
    <div id="pressureDate" class="pressureDate">
		<div class="content_wrap">
			<div class="opt_wrap">
				<!-- 新增、删除、导入、导出 -->
				<!-- <el-button type="primary" icon="el-icon-plus">新增</el-button>
				<el-button type="primary" icon="el-icon-delete">删除</el-button>
				<el-button type="primary" icon="el-icon-upload2">导入</el-button> -->
				<el-button type="primary" icon="el-icon-download" @click="doExport" v-loading.fullscreen.lock="fullscreenLoading">导出</el-button>
			</div>
			<el-table
				:data="tableData"
				style="width: 100%" 
				@selection-change="selectChange">
				<el-table-column
				type="selection" >
				</el-table-column>
				<el-table-column
					label="序号"
					prop="id" width="80px">
				</el-table-column>
				<el-table-column
					prop="address"
					label="位置">
				</el-table-column>
				<el-table-column
					prop="updateTime"
					label="更新时间">
				</el-table-column>
				<el-table-column
					prop="level"
					label="爆管等级">
				</el-table-column>
				<el-table-column
					prop="extent"
					label="紧急程度">
				</el-table-column>
				<el-table-column
					prop="status"
					label="状态">
					<template slot-scope="scope">
						<span v-if="scope.row.status == '待处理'" class="pending status_label">{{scope.row.status}}</span>
						<span v-else-if="scope.row.status == '未处理'" class="untreated status_label">{{scope.row.status}}</span>
						<span v-else-if="scope.row.status == '已处理'" class="processed status_label">{{scope.row.status}}</span>
					</template>
				</el-table-column>				
    		</el-table>
				<div class="block">
					<el-pagination
					:current-page="pageNum"
					:page-sizes="[10, 20, 50, 100]"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total">
					</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import PanelWrap from '@/components/PanelWrap'
import {exporYLSJData,exporBGSJData} from '@/api/index.js'
import { saveAs } from 'file-saver'
export default {
	name:'pressureDate',
	data(){
		return {
			pageSize:10,
			pageNum:0,
			total:0,
			tableData: [],
			fullscreenLoading:false,
			selectIds:[],
		}
	},
	components:{
		PanelWrap
	},
	mounted(){
		this.getTableData()
	},
	methods:{
		getTableData(){
			this.$axios.post('http://43.136.137.111:9898/system/pipesquib/record/list',{
				pageSize:this.pageSize,
				pageNum:this.pageNum
			}).then(res => {
				this.tableData = res.data.rows; 
				this.total = res.data.total;
			})
		},
		handleSizeChange(val){
			this.pageSize = val;
			this.getTableData();
		},	
		handleCurrentChange(val){
			this.pageNum = val;
			this.getTableData();
		},
		//导出
		doExport(){
			this.fullscreenLoading = true;
			exporBGSJData({ids:this.selectIds}).then(res => {
				let blob = new Blob([res.data])
				const fliName = '爆管记录'+new Date().getTime()+ '.xlsx'
				saveAs(blob,fliName)
				this.fullscreenLoading = false;
			}).catch(error => {
				console.log(error)
			})
		},
		//选择		
		selectChange(selection){
			let arr = [];
			selection.forEach(element => {
				arr.push(element.id)
			});
			this.selectIds = arr;
		}
	}
}
</script>

<style lang="less" scoped>
.pressureDate{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #02182d;
		box-sizing: border-box;
		.content_wrap{
			position: relative;
			width: 100%;
			box-sizing: border-box;
			padding: 135px 25px 30px 25px;
			.el-table, .el-table__expanded-cell{
				background-color: transparent;
			}
			.el-table{
				margin-top: 10px;
				tr{
					height: 56px;
					background:transparent;
					color: rgba(255, 255, 255, 0.65);
					.status_label{
						display: inline-block;
						width: 54px;
						height: 22px;
						border-radius: 2px;
						color:#FFFFFF;
						font-family: 'Source Han Sans CN';
						font-style: normal;
						font-weight: 400;
						font-size: 14px;
						line-height: 21px;
						text-align: center;
					}
					.pending{
						background: #1C84C6;
					}
					.untreated{
						background: #ED5565;
					}
					.processed{
						background: rgba(35, 198, 200, 0.6);
					}
				}
				.el-table th.el-table__cell{
					background-color: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%);
				}	
				th.el-table__cell{
					background: rgba(11, 117, 216, 0.1);;
				}
				td.el-table__cell, th.el-table__cell.is-leaf{
					border-bottom: 1px solid rgba(255, 255, 255, 0.1);;
				}
			}
		  
			.el-table::before{
				display: none;
			}
			.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
					background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%) !important;
					color: rgba(2, 154, 250, 1);
				}
				
			.el-button--primary{
				color: rgba(255, 255, 255, 0.65);
				background: transparent;
				border-color: #023557;
			}
			.el-button--primary:hover{
				border-color: rgba(2, 154, 250, 1);;
				color: rgba(2, 154, 250, 1);
			}
			.el-checkbox__inner{
				background: transparent;
				width: 15px;
				height: 15px;
				border: 1px solid rgba(255, 255, 255, 0.5);
			}

			.block{
				margin-top: 10px;
				text-align: center;
				color: rgba(255, 255, 255, 1);
				.el-input__inner{
					border: 1px solid rgba(255, 255, 255, 0.3);
					background: transparent;
				}
				.el-pager li{
					background: transparent;
				}
				.el-pagination .btn-next, .el-pagination .btn-prev{
					background: transparent;
				}
				span,input,i,li{
					color: #FFFFFF;
				}
			}
		}
	}
	
</style>